<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="../WEB-INF/plantilla/layout.xhtml">
    <ui:define name="contenido">
	    <h:form id="frm">
	    <p:panel header="ANÁLISIS DE HISTORIAS" id="pnlAlg" style="width:100%;margin:0 2px 0 0px">
			<h:panelGrid columns="1">
		    	 <p:growl id="growl" showDetail="true"  />
			      <p:barChart id="historias" value="#{chartEst.pmHistoriasAfectadas}" legendPosition="n"  legendCols="2" legendRows="3"  showDataLabels="true" 
				            title="Porcentaje de Enfermedades(Hallazgos) Afectados en Pacientes" stacked="true" zoom="true"  
				            widgetVar="chart" xaxisLabel="Hallazgos" 
				             showDatatip="" style="width:910px;height:400px; font-weight: bold; font-size:1.3em"> 
				             <p:ajax event="itemSelect" listener="#{chartEst.itemSelect}" update="growl" >
				             	
				             </p:ajax> 
				   </p:barChart> 
				   <p:commandButton type="button" value="Reset" icon="ui-icon-cancel" onclick="PF('chart').resetZoom()"/>
			</h:panelGrid>
		   	<p:panel header="LEYENDA" style="width:90%;margin:0 50px 0 70px">
		   <h:panelGrid columns="3" style="width:750px; " title="">
			   	<p:dataList id="lista1" value="#{chartEst.listaHallazgo1}" var="tbl" style="width:250px; font-weight: bold; font-size:1.0em" >
				    #{tbl.numeroHallazgo}, #{tbl.sinonimo}  
				</p:dataList>
				<p:dataList id="lista2" value="#{chartEst.listaHallazgo2}" var="tbl2"  style="width:250px;" >
			 	 	#{tbl2.numeroHallazgo}, #{tbl2.sinonimo} 
				</p:dataList>
				<p:dataList id="lista3" value="#{chartEst.listaHallazgo3}" var="tbl2"   style="width:250px;">
			 		 #{tbl2.numeroHallazgo}, #{tbl2.sinonimo} 
				</p:dataList>
		   	</h:panelGrid>
		   	</p:panel>
		  	</p:panel>	
          
          
	    </h:form>
	    <script type="text/javascript" >
	    
	 // A $( document ).ready() block.
	    $( document ).ready(function() {
	        
	    	//var lis = document.getElementById('frm:lista1_list');
	    	//alert('El valor es:'+lis.getAttributeNode('li') .length)
	    	
	    });	    
   		 </script>
   </ui:define>
</ui:composition>
	
</html>
